<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>聊天页面-信息列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f7f7f7;
            line-height: 1;
        }

        .shop_sharing_box {
            background-color: #fff;
        }

        .textarea_box {
            min-height: 8.25rem;
            padding: 1rem 0.75rem;
        }
        /*定位*/

        .localtion {
            position: relative;
            display: flex;
            align-items: center;
            padding: 0.75rem;
        }

        .localtion::before {
            position: absolute;
            top: 0;
            right: 0;
            content: "";
            height: 1px;
            width: calc(100% - 0.75rem);
            background-color: #e6e6e6;
        }

        .localtion img {
            width: 0.75rem;
            margin-right: 0.75rem;
        }

        .localtion span {
            font-size: 0.7rem;
            color: #333;
        }

        .localtion span.address {
            flex: 1;
        }
        /*分享的商品*/

        .my_shop_box {
            margin: 0.45rem 0;
        }

        .my_shop {
            position: relative;
            padding: 0.75rem;
            background-color: #fff;
            display: flex;
            align-items: center;
        }

        .my_shop::after {
            content: "";
            position: absolute;
            bottom: 0;
            right: 0;
            height: 1px;
            width: calc(100% - 0.75rem);
            background-color: #e6e6e6;
        }

        .my_shop img {
            width: 0.75rem;
            margin-right: 0.75rem;
        }

        .my_shop span {
            font-size: 0.7rem;
            color: #333;
        }

        .my_shop span.my_shop_name {
            flex: 1;
        }

        .share_shop_box {
            padding: 1rem 0.75rem;
            background-color: #fff;
        }

        .my_share {
            padding: 0.5rem;
            background-color: #f7f7f7;
            display: flex;
            align-items: center;
        }
        /*.my_share img{
          width: 2.5rem;
          margin-right: 0.5rem;
        }*/

        .my_share span {
            font-size: 0.7rem;
            color: #333;
            line-height: 1.5;
        }


        /*遮罩*/

        .cover {
            position: fixed;
            background-color: rgba(0, 0, 0, .6);
            width: 100vw;
            height: 100vh;
            top: 0;
            display: none;
        }
        /*弹出框样式*/

        .success_toast {
            background-color: #fff;
            width: 10rem;
            height: 10rem;
            position: absolute;
            top: calc(50% - 1.125rem);
            left: 50%;
            transform: translateX(-50%) translateY(calc(-50% - 1.125rem));
            border-radius: 0.3rem;
            text-align: center;
        }

        .success_toast img {
            width: 2.5rem;
            margin: auto;
            margin-top: 2.625rem;
            margin-bottom: 1.5rem;
        }

        .success_toast span {
            color: #333;
            font-size: 0.9rem;
        }
    </style>
</head>

<body>
    <div class="shop_sharing_box">
        <textarea name="name" rows="8" cols="80" placeholder="来分享您此刻的想法吧..." class="textarea_box"></textarea>


        <div class="localtion" onclick="open_new_win('four','位置选择','定位','完成')">
            <img src="../../image/four/address.png" alt="">
            <span class="address">所在位置</span>
            <span class="aui-iconfont aui-icon-right"></span>
        </div>
    </div>

    <div class="my_shop_box">
        <div class="my_shop" onclick="open_my_shop()">
            <img src="../../image/four/my_shop.png" alt="">
            <span class="my_shop_name">我的小店</span>
            <span class="aui-iconfont aui-icon-right"></span>
        </div>
        <div class="share_shop_box" v-if="is_show" v-cloak>
            <div class="my_share">
                <!-- <img src="../../image/four/test.jpg" alt=""> -->
                <div :style="'background:url('+shop_msg_data.logo_pic+') center/cover no-repeat;width:2.5rem;height:2.5rem;margin-right:0.5rem;'"></div>
                <span class="shop_title">{{shop_msg_data.goods_title}}</span>
            </div>
        </div>
    </div>

    <!-- 遮罩 -->
    <div class="cover">
        <dis class="success_toast">
            <img src="../../image/four/success.png" alt="">
            <span>发布成功</span>
        </dis>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    var shop_data;
    var address = '';
    apiready = function() {
        // 设置状态栏文字颜色
        api.setStatusBarStyle({
            style: 'dark'
        });

        // 接收被选择的商品信息数据
        api.addEventListener({
            name: 'my_chose_shop_msg'
        }, function(ret, err) {
            if (ret) {
                shop_data.is_show = true;
                shop_data.shop_msg_data = ret.value.chose_shop_msg;
                shop_data.shop_id = ret.value.chose_shop_msg.goods_id;
                console.log(JSON.stringify(shop_data.shop_msg_data))
            } else {
                alert(JSON.stringify(err));
            }
        });

        // 实例化vue 渲染要分享的商品数据
        shop_data = new Vue({
            el: '.my_shop_box',
            data: {
                shop_msg_data: {},
                is_show:false,
                shop_id:0
            }
        })

        // 改变地址
        api.addEventListener({
            name: 'send_address'
        }, function(ret, err) {
            if (ret) {
                //  console.log("选择地址成功后的数据---"+ JSON.stringify( ret ) );
                if (ret.value) {
                    //  alert(ret.value.address);
                    $('.address').html(ret.value.address);
                    address = ret.value.address;
                }
            } else {
                alert(JSON.stringify(err));
            }
        });

    };



    // 打开对应的窗口
    function open_new_win(index, title, type, right_txt) {
        api.openWin({
            name: 'four_' + index + '_header' + index,
            url: 'four_headers/four_' + index + '_header.html',
            pageParam: {
                title: title,
                type: type,
                right_txt: right_txt
            }
        });
    }


    // 打开我的小店
    function open_my_shop() {
        api.openWin({
            name: 'my_shop_win',
            url: 'four_headers/four_one_header.html',
            pageParam: {
                type: "商品选择",
                title: "商品选择"
            }
        });

    }



    // 添加遮罩和弹窗
    function add_cover() {
        $('.cover').show();
        setTimeout(function() {
            $('.cover').hide();
        }, 2000)
    }


    // 发布图文朋友圈
    function shop_sharing() {
      api.showProgress({
          style: 'default',
          animationType: 'fade',
          title: '发布中...',
          text: '先喝杯茶...',
          modal: false
      });
        // 获取输入的内容
        var input_txt = $('.textarea_box').val();

        api.ajax({
            url: window.Url.Community_addDynamic,
            method: 'post',
            data: {
                values: {
                    token: $api.getStorage('token'),
                    content: input_txt,
                    type: 2,
                    address: address,
                    goods_id:shop_data.shop_id
                }
            }
        }, function(ret, err) {
            if (ret) {
                // console.log('图文分享发布成功的返回数据---'+JSON.stringify(ret));
                if(ret.re==1){
                  api.hideProgress();

                  api.execScript({
                      name: 'four_index',
                      frameName: 'friend_list',
                      script: 'window.location.reload();'
                  });

                  // 执行win的添加移除遮罩方法
                  api.execScript({
                      script: 'add_move(2);'
                  });

                  setTimeout(function(){
                    api.closeWin({});
                  },2000);
                }
            } else {
                alert(JSON.stringify(err));
            }
        });
    }
</script>

</html>
